<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { postLoginWxMinAPI, postPhoneAPI, getUserInfoByIdAPI, putUserInfoAPI } from '@/api/account'
import { useMemberStore } from '@/stores'
import { useRoleStore } from '@/stores'
import { busListStore } from '@/stores'
import { ref } from 'vue'
import { baseURL } from '@/utils/http'

const loginProfile = {
  grant_type: 'mobile',
  mobile: 'MINI@',
  code: 'mobile',
}

const memberStore = useMemberStore()
const roleStore = useRoleStore()
const busStore = busListStore()
onLoad(async () => {
  if (memberStore.profile && memberStore.profile.userId) {
    uni.showToast({ icon: 'success', title: '自动登录中...' })
    setTimeout(() => {
      roles()
    }, 1000)
  }
})

const onGetphonenumber: UniHelper.ButtonOnGetphonenumber = async (ev) => {
  // 获取微信code
  // #ifdef H5
  const loginrRes = await getUserInfoByIdAPI('1792361898946121730')
  let appUser = loginrRes.data
  let phonecode = loginrRes.data.username
  loginrRes.data.busList = {}
  loginrRes.data.roleCodes = 'bus_user'
  // #endif
  // #ifndef H5
  const res = await wx.login()
  
  const { code } = res
  // 获取手机code
  let phonecode = ev.detail.code
  // #endif
  if (phonecode) {
    const phoneRes = await postPhoneAPI(phonecode)
    let phoneNumber = phoneRes.data.phoneNumber
    // 发起请求
    // #ifndef H5
    const loginrRes = await postLoginWxMinAPI(code, phoneNumber)
    let appUser = loginrRes.data.appUser
    // #endif
    appUser.avatar = baseURL + appUser.avatar
    let form = ref({
      userId: '',
      nickname: '',
      avatar: '',
    })
    form.value.userId = appUser.userId

    await wx.getUserInfo({
      success: function (res) {
        form.value.nickname = res.userInfo.nickName
        form.value.avatar = res.userInfo.avatarUrl

        putUserInfoAPI(form.value)
        console.log('完成请求');
      },
    })
    if (appUser.avatar?.includes('http')) {
      // console.log(appUser.avatar)
    } else {
      appUser.avatar = baseURL + appUser.avatar
    }

    // 保存会员信息
    if (loginrRes.data != null) {
      memberStore.setProfile(appUser)
      roleStore.setRoles(loginrRes.data.roleCodes ? loginrRes.data.roleCodes : null)
      busStore.setBus(
        loginrRes.data.busList != '[]' && loginrRes.data.busList != null
          ? loginrRes.data.busList
          : null,
      )
      uni.redirectTo({ url: '/pages/my/my' })
    } else {
      uni.showToast({ icon: 'error', title: '登陆错误，请联系管理员' })
    }
  } else {
    uni.showToast({ icon: 'error', title: '当前用户没有绑定手机，请绑定后再试！' })
  }
}

// 判断用户角色
const roles = () => {
  uni.redirectTo({ url: '/pages/my/my' })
  // if (roleStore.roles) {
  //   if (roleStore.roles.includes('bus_user')) {
  //     uni.redirectTo({ url: '/pages/business/business' })
  //   } else if (roleStore.roles.includes('agent_user')) {
  //     uni.redirectTo({ url: '/pages/indexAgent/indexAgent' })
  //   } else if (roleStore.roles.includes('bus_agent')) {
  //     uni.redirectTo({ url: '/pages/indexBusinessAgent/indexBusinessAgent' })
  //   } else if (roleStore.roles.includes('delivery_user')) {
  //     uni.redirectTo({ url: '/pages/carry/carry' })
  //   } else {
  //     uni.redirectTo({ url: '/pages/my/my' })
  //   }
  // } else {
  //   uni.redirectTo({ url: '/pages/my/my' })
  // }
}
</script>

<template>
  <view class="viewport">
    <view class="logo">
      <image src="http://8.130.69.166/publick/cv-logo-normal.png"></image>
    </view>
    <view class="login">
      <!-- 网页端表单登录 -->
      <!-- <input class="input" type="text" placeholder="请输入用户名/手机号码" /> -->
      <!-- <input class="input" type="text" password placeholder="请输入密码" /> -->
      <!-- <button class="button phone">登录</button> -->
      <!-- 小程序端授权登录 -->
      <!--       #ifdef H5-->
      <!-- <button class="button phone" style="margin-top: 133rpx" @tap="onGetphonenumber">
        <text class="icon icon-phone"></text>
        h5手机授权登录
      </button> -->
      <!--       #endif-->
      <button class="button phone" open-type="getPhoneNumber" @getphonenumber="onGetphonenumber">
        <text class="icon icon-phone"></text>
        微信手机授权登录
      </button>
      <view class="tips"
        >登录/注册即视为你同意<navigator url="/pages/newsDetail/newsDetail?id=1823917471365664770">
          <text style="color: rgb(0, 184, 246)">《用户服务协议》</text> </navigator
        >和<navigator url="/pages/newsDetail/newsDetail?id=1823917752946069505">
          <text style="color: rgb(0, 184, 246)">《隐私保护政策》</text>
        </navigator></view
      >
    </view>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
}

.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20rpx 40rpx;
}

.logo {
  flex: 1;
  text-align: center;

  image {
    width: 345rpx;
    height: 114rpx;
    margin-top: 15vh;
  }
}

.login {
  display: flex;
  flex-direction: column;
  height: 60vh;
  padding: 40rpx 20rpx 20rpx;

  .input {
    width: 100%;
    height: 80rpx;
    font-size: 28rpx;
    border-radius: 72rpx;
    border: 1px solid #ddd;
    padding-left: 30rpx;
    margin-bottom: 20rpx;
  }

  .button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80rpx;
    font-size: 28rpx;
    border-radius: 72rpx;
    color: #fff;

    .icon {
      font-size: 40rpx;
      margin-right: 6rpx;
    }
  }

  .phone {
    background-color: #28bb9c;
  }

  .wechat {
    background-color: #06c05f;
  }

  .extra {
    flex: 1;
    padding: 70rpx 70rpx 0;

    .caption {
      width: 440rpx;
      line-height: 1;
      border-top: 1rpx solid #ddd;
      font-size: 26rpx;
      color: #999;
      position: relative;

      text {
        transform: translate(-40%);
        background-color: #fff;
        position: absolute;
        top: -12rpx;
        left: 50%;
      }
    }

    .options {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 70rpx;

      button {
        padding: 0;
        background-color: transparent;
      }
    }

    .icon {
      font-size: 24rpx;
      color: #444;
      display: flex;
      flex-direction: column;
      align-items: center;

      &::before {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 6rpx;
        font-size: 40rpx;
        border: 1rpx solid #444;
        border-radius: 50%;
      }
    }

    .icon-weixin::before {
      border-color: #06c05f;
      color: #06c05f;
    }
  }
}

.tips {
  position: absolute;
  bottom: 80rpx;
  left: 20rpx;
  right: 20rpx;
  font-size: 22rpx;
  color: #999;
  text-align: center;
  width: 95%;
  navigator {
    display: inline;
  }
}
</style>
